<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"	name="viewport">
<link rel="shortcut icon" data-th-href="@{../static/img/logo.png}" 	type="image/x-icon">
<link rel="stylesheet"	data-th-href="@{../static/AdminLTE-2.4.10/bower_components/bootstrap/dist/css/bootstrap.min.css}">
<link rel="stylesheet"	data-th-href="@{../webjars/bootstrap-select/2.0.0-beta1/dist/css/bootstrap-select.css}">
<link href="../webjars/bootstrapvalidator/0.5.2/css/bootstrapValidator.css"	rel="stylesheet" />

<!-- Font Awesome -->
<link rel="stylesheet"	data-th-href="@{../static/AdminLTE-2.4.10/bower_components/font-awesome/css/font-awesome.min.css}">
<!-- Ionicons -->
<link rel="stylesheet"	data-th-href="@{../static/AdminLTE-2.4.10/bower_components/Ionicons/css/ionicons.min.css}">
<!-- Theme style -->
<link rel="stylesheet"	data-th-href="@{../static/AdminLTE-2.4.10/dist/css/AdminLTE.min.css}">
<link rel="stylesheet"	data-th-href="@{../static/AdminLTE-2.4.10/dist/css/skins/skin-blue.css}">

<link rel="stylesheet"	data-th-href="@{../static/bootstrap-fileinput-master/css/fileinput.min.css}">

<style>
.idiotCover {
	background-color: #000;
	position: fixed;
	z-index: 9999999;
	opacity: 0.3;
	filter: Alpha(opacity = 70);
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.idiotProgressBox {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	margin: auto;
	min-width: 200px;
	width: 250px;
	height: 100px;
	padding: 30px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 16px;
}

.idiotProgress {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.idiotProgress idiotProgress-title {
	display: flex;
	border: 2px solid #fff;
	justify-content: center;
	align-items: center;
}

.idiotProgress .idiotProgress-title p {
	color: #eee;
	font-size: 17px;
	font-weight: 500;
	margin-left: 10px;
}

.idiotProgress img {
	margin: 10px;
	width: 35px;
	height: 35px;
}
body {
	background-color:  #f1f1f1;
}
.panel{
	border-width: 0px;
}
.panel-heading{
	position: relative;
	font-size: 15px;
	display: flex;
	align-items: flex-end;
	
}
.panel-heading .txt{
	position: absolute;
	left: 0px;
}
.panel-heading .title{
	width:100%;
	text-align: center;
}

.back_icon{
	padding-left : 14.7px;
	padding-right: 10px; 
	
}

.bg-gradual-red {
	background-image: linear-gradient(45deg, #f43f3b, #ec008c);
	color: #ffffff;
}
</style>
</head>

<body>
	
	<div class="panel panel-primary">
	        <div class="panel-heading bg-gradual-red">
	        	<div class="txt"><i class="glyphicon glyphicon-menu-left back_icon"></i>返回</div>
	        	<div data-th-if="${edit}" class="title">编辑文件</div>
	        	<div data-th-if="${!edit}" class="title">上传资源</div>
	        </div>
	        <div class="panel-body">
				<form id="formEdit" action="save" class="form-horizontal"	role="form"  style="width:80%;margin: 0 auto">
	        		<input type="hidden" name="id" data-th-value="${model.id}">
					<input type="hidden" name="userName" data-th-value="${param.userName}"/>
					
					<div th:if="${edit}" class="form-group" id="myfile1">
						<label for="txt_file" class="col-sm-2 control-label">文件</label>
						<div class="col-sm-9">
							<input type="file" name="file" id="file1" data-show-preview="false">
						</div>
					</div>
					
					<div th:if="${!edit}" class="form-group" id="myfile" >
						<label for="txt_file" class="col-sm-2 control-label">文件</label>
						<div class="col-sm-9">
							<input type="file" name="file2" id="file" required multiple data-show-preview="false"
								data-bv-notempty-message="文件不能为空">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_fileName" class="col-sm-2 control-label">文件标题</label>
						<div class="col-sm-9">
							<input type="text" name="fileTitle"
								data-th-value=${model.fileTitle} class="form-control"
								id="text_fileTitle" placeholder="文件标题">
						</div>
					</div>
					<div class="form-group">
						<label for="txt_type" class="col-sm-2 control-label">权限设置</label>
						<div class="col-sm-9">
							<select class="form-control selectpicker" title="权限"
								name="fileNature">
								<option data-th-each="t:${fileNature}"
									data-th-selected="${#strings.contains(model.fileNature==null?'1':model.fileNature.name,t.name)}"
									data-th-text="${t.name}" data-th-value="${t.id}"></option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="txt_fileType" class="col-sm-2 control-label">文件类型</label>
						<div class="col-sm-9">
							<select class="form-control selectpicker" title="类型"
								name="fileType">
								<option data-th-each="t:${fileType}"
									data-th-selected="${#strings.contains(model.fileType==null?'1':model.fileType.name,t.name)}"
									data-th-text="${t.name}" data-th-value="${t.id}"></option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="txt_fileRemark" class="col-sm-2 control-label">文件备注</label>
						<div class="col-sm-9">
							<input type="text" name="fileRemark"
								data-th-value=${model.fileRemark} class="form-control"
								id="txt_fileRemark" placeholder="文件备注">
						</div>
					</div>
	        <div class="form-group" style="text-align: center;">
				<button type="submit" class="btn btn-primary" style="width: 80%;height: 100%;margin-top:20px; ">
						<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>提交
				</button>
			</div>
			</form>	        
    </div>

	<script data-th-src="@{../static/AdminLTE-2.4.10/bower_components/jquery/dist/jquery.min.js}"></script>
	<!-- Bootstrap 3.3.7 -->
	<script	data-th-src="@{../static/AdminLTE-2.4.10/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
	<script type="text/javascript" 	src="../webjars/bootstrap-select/2.0.0-beta1/dist/js/bootstrap-select.js"></script>
	<script type="text/javascript"		src="../webjars/bootstrap-select/2.0.0-beta1/dist/js/i18n/defaults-zh_CN.js"></script>
	<script src="../webjars/bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script>
	<script src="../webjars/bootbox/4.4.0/bootbox.js"></script>
	<!-- bootstrap-fileinput的js -->
	<script type="text/javascript" 	data-th-src="@{../static/bootstrap-fileinput-master/js/fileinput.min.js}"></script>
	<script type="text/javascript"		data-th-src="@{../static/bootstrap-fileinput-master/js/locales/zh.js}"></script>
	<script type="text/javascript" src="../static/js/webview.js"></script>
	
	<script type="text/javascript">
	function goback(){
		uni.navigateBack();
	} 
	
	 $(function () {
		 	var CustomBar=[[${param.CustomBar}]];
		 	var StatusBar=[[${param.StatusBar}]];
		 	$('.txt').click(function(){
		 			goback();
		 	});
		 	$('.panel-heading').css({'height':CustomBar,'padding-top':StatusBar});
		   $('.selectpicker').selectpicker();
	        initFileInput("file1");
	        initFileInput("file");
	    });
	 
	    function initFileInput(ctrlName) {
	    	var control = $('#' + ctrlName);
	        control.fileinput({
	            language: 'zh', //设置语言
	            uploadUrl: "", //上传的地址
	            allowedFileExtensions: ['jpg', 'gif', 'png','txt','doc','docx','xls','xlsx','ppt','mp3','wav','ogg','mp4','avi','mov','rmvb','rm','flv','3GP'],//接收的文件后缀
	            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
	            maxFileCount:0, //最大上传文件数，0为不限最大文件数
	            uploadAsync: true, //默认异步上传
	            showUpload: false, //是否显示上传按钮
	            showClose:false,	//隐藏右上角叉
	            showRemove : true, //显示移除按钮
	           // showPreview : edit, //是否显示预览
	            showCaption: true,//是否显示标题
	            browseClass: "btn btn-primary", //按钮样式
	            enctype: 'multipart/form-data',
	            validateInitialCount:true,
	            textEncoding:'UTF-8',
	            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
	        }).on("fileuploaded", function (event, data, previewId, index){
	        });
	    }
</script>
	<script type="text/javascript" th:inline="javascript">
 	var options= {
			message: '验证不通过',
			feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: { 
            	 
           	 fileTitle: {
    				validators: {
    					notEmpty: {
    						message: '文件标题不能为空'
    					}
    				}
    			} 
             	
             }
         };
        $('#formEdit').bootstrapValidator(options).on('success.form.bv', function(e) {
        	showLoading(null,true);
        	e.preventDefault();							   	//很重要没有它则会提交默认表单，不会做下面的ajax表单提交
            var fd = new FormData($("#formEdit")[0]); 
            var url=$('#formEdit').attr('action');
        	$.ajax({ 
              url: url,  
              type: "POST",  
              data: fd,  
              processData: false,  // 不处理数据  
              contentType: false,   // 不设置内容类型
              success:function(result){
            	  if(result.success){
            		  closeLoading();
	            	 //这里开始返回
            		  uni.navigateBack();
            	  }else{
            		  closeLoading();
            		  alert(result.msg);
            	  }
              },
              error:function(result){
            	  closeLoading();
            	  alert("保存请求发送失败，请检查网络是否连通");
              }
            });  
    	});
 			
 		//打开关闭加载动画
 		function showLoading(title, modal) {
            if (title == null || title == '' || title == undefined) {
                title = '上传中。。。';
            }
            if (modal == null || modal == '' || modal == undefined) {
                modal = false;
            }
            var body = document.getElementsByTagName("body")[0];
            //console.log(body);
            var html = "<div class='idiotProgressBox' id='idiotProgress'>" +
                "<div class='idiotProgress'><img src='../static/img/loading.gif'/>" +
                "<div class='idiotProgress-title'><p>" + title + "</p></div>" +
                "</div>" +
                "</div>";
            var modalhtml;
            if (modal) {
                modalhtml = "<div id='idiotCover' class='idiotCover'></div>";
            } else {
                modalhtml = "<div id='idiotCover' class='idiotCover' onclick='closeLoading()'></div>";
            }
            body.insertAdjacentHTML("afterbegin", modalhtml);
            body.insertAdjacentHTML("afterbegin", html);
        }

        function closeLoading() {
            var progress = document.getElementById("idiotProgress");
            var cover = document.getElementById("idiotCover");
            if (progress != null && progress != undefined) {
                progress.parentNode.removeChild(progress);
            }
            if (cover != null && cover != undefined) {
                cover.parentNode.removeChild(cover);
            }
        }
</script>
</body>
</html>